import { Select } from 'antd'
import { Line } from '@ant-design/plots'
import { Column } from '@ant-design/plots'
import { useLocation } from 'react-router-dom'
import { useRef, useState, useEffect } from 'react'
import { useEventEmitter, useRequest, useSize } from 'ahooks'

import { Http } from '../../../../Common/Api'
import { complexColumnTemplate } from '../Template'
import { ICON } from '../../../../Common/Configure/Icon'
import { ModalBox } from '../../../../Common/Modal/ModalBox'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { parseURLParams } from '../../../../Common/Configure/Common'

const colorTwo = [
    'rgba(135, 213, 255, 1)',
    'rgba(57, 225, 195, 1)',
    'rgba(233, 147, 255, 1)',
    'rgba(95, 143, 255, 1)',
    'rgba(110, 218, 128, 1)',
    'rgba(255, 121, 121, 1)',
]

const colorThr = [
    'rgba(135, 213, 255, 1)',
    'rgba(57, 225, 195, 1)',
    'rgba(233, 147, 255, 1)',
    'rgba(95, 143, 255, 1)',
    'rgba(110, 218, 128, 1)',
    'rgba(255, 121, 121, 1)',
]

export const SevOne = () => {
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)
    const ChartFou = useRef()
    const SizeFou = useSize(ChartFou)

    const { search } = useLocation()
    const { uuid } = parseURLParams(search)

    const [OptionsCallTwo, setOptionsCallTwo] = useState()

    const OptionsEvent = useEventEmitter()
    OptionsEvent.useSubscription(val => {
        console.log(val)
    })

    const { runAsync: getOne } = useRequest(Http, { manual: true, onSuccess: res => setDataOne(res) })

    const { runAsync: getThr } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ uuid, 名称, 利润, 成本, 收入 }) => {
                data = [
                    ...data,
                    { uuid, type: '收入', label: 名称, value: 收入 },
                    { uuid, type: '成本', label: 名称, value: 成本 },
                    { uuid, type: '利润', label: 名称, value: 利润 },
                ]
            })
            setDataThr(data)
        },
    })

    const { runAsync: getFou } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let A01 = []
            let A02 = []

            res.list.forEach(({ uuid, 年份, 月份, 利润, 收入 }) => {
                A01 = [...A01, { uuid, type: 年份, label: 月份, value: 收入 }]
                A02 = [...A02, { uuid, type: 年份, label: 月份, value: 利润 }]
            })
            setA01Data(A01)
            setA02Data(A02)
        },
    })

    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.list.forEach(({ uuid, 年月, 类型, 金额 }) => {
                data = [...data, { uuid, type: 类型, label: 年月, value: 金额 }]
            })
            setA03Data(data)
        },
    })

    const [DataOne, setDataOne] = useState()

    const ListOne = [
        { uuid: 2, label: '收入', value: '收入', unit: '万元', icon: 'IconHoutaiShouyetouzikongjian' },
        { uuid: 3, label: '成本', value: '成本', unit: '万元', icon: 'IconAHoutaiShouyetouzikongjianbeifen10' },
        { uuid: 4, label: '利润', value: '利润', unit: '万元', icon: 'IconAHoutaiShouyetouzikongjianbeifen10' },
        { uuid: 6, label: '利润率', value: '利润率', unit: '%', icon: 'IconChart78' },
    ]

    const [DataThr, setDataThr] = useState([])

    const [A01Data, setA01Data] = useState([])
    const [A02Data, setA02Data] = useState([])
    const [A03Data, setA03Data] = useState([])

    const [Active, setActive] = useState(1)

    const NavFou = [
        { uuid: 1, label: '历史同期收入对比' },
        { uuid: 2, label: '历史同期利润对比' },
        { uuid: 3, label: '按月收入对比' },
    ]

    const [Year, setYear] = useState(3)

    useEffect(() => {
        getOne({ url: 'getBranchCompanyCost', data: { OrganizationUuid: uuid } })

        getThr({ url: 'getProjectCostByBranchCompany', data: { OrganizationUuid: uuid } })
    }, [getOne, getThr, uuid])

    const options = Array.from({ length: 9 }, (_, index) => ({ label: `最近${index + 2}年`, value: index + 2 }))

    useEffect(() => {
        getFou({ url: 'getEveryMonthCumulativeCostByYearOrg', data: { Year, OrganizationUuid: uuid } })
        getTwo({ url: 'getEveryMonthCostByYearOrg', data: { Year, OrganizationUuid: uuid } })
    }, [Year, uuid, getFou, getTwo])

    return (
        <>
            <div className="top">
                <CommonSmallTitle title="成本年经营运行情况" flex={1} style={{ marginRight: 16 }}>
                    <div
                        className="one"
                        // onClick={() => {
                        //     setOptionsCallTwo({
                        //         type: 'OpenExcel',
                        //         data: {
                        //             title: '成本年经营运行情况',
                        //             width: 1500,
                        //             data: {
                        //                 save: true,
                        //                 CostMonthUuid: DataOne.costMonthUuid,
                        //                 url: 'getCostMonthGetCostMonthPlanGroupZG',
                        //             },
                        //         },
                        //     })
                        // }}
                    >
                        {ListOne.map(({ uuid, label, value, unit, icon }) => (
                            <div key={uuid}>
                                {ICON[icon]}
                                <div>
                                    <div>{label}</div>
                                    <div>
                                        {DataOne ? DataOne[value] : 0} {unit}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按公司成本统计" flex={2}>
                    <div className="thr" ref={ChartThr}>
                        {SizeThr && OptionsEvent && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeThr,
                                    data: DataThr,
                                    color: colorTwo,
                                    isGroup: true,
                                    yTitle: '万元',
                                    scrollbar: 300,
                                })}
                                // onReady={plot =>
                                //     plot.on('plot:click', e => {
                                //         const { x, y } = e
                                //         const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                //         setOptionsCallTwo({
                                //             type: 'OpenExcel',
                                //             data: {
                                //                 title: '按公司成本统计',
                                //                 width: 1500,
                                //                 data: {
                                //                     save: true,
                                //                     OrganizationUuid: data.uuid,
                                //                     url: 'getCostMonthPlanDetailsByOrganizationUuid',
                                //                 },
                                //             },
                                //         })
                                //     })
                                // }
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <div className="btm">
                <CommonSmallTitle title="本年每个月各个公司情况">
                    <div className="fou">
                        <div className="Top">
                            <div className="Nav">
                                {NavFou.map(({ uuid, label }) => (
                                    <div
                                        key={uuid}
                                        className={Active === uuid ? 'active' : ''}
                                        onClick={() => setActive(uuid)}
                                    >
                                        {label}
                                    </div>
                                ))}
                            </div>
                            <div>
                                <Select
                                    showSearch
                                    style={{ width: 160 }}
                                    defaultValue={Year}
                                    options={options}
                                    onChange={e => setYear(e)}
                                />
                            </div>
                        </div>
                        <div className="Charts" ref={ChartFou}>
                            {SizeFou &&
                                (Active === 1 ? (
                                    <Line
                                        {...complexColumnTemplate({
                                            size: SizeFou,
                                            data: A01Data,
                                            color: colorThr,
                                            isGroup: true,
                                            yTitle: '万元',
                                        })}
                                    />
                                ) : Active === 2 ? (
                                    <Line
                                        {...complexColumnTemplate({
                                            size: SizeFou,
                                            data: A02Data,
                                            color: colorThr,
                                            isGroup: true,
                                            yTitle: '万元',
                                        })}
                                    />
                                ) : (
                                    <Line
                                        {...complexColumnTemplate({
                                            size: SizeFou,
                                            data: A03Data,
                                            color: colorThr,
                                            isGroup: true,
                                            yTitle: '万元',
                                        })}
                                    />
                                ))}
                        </div>
                    </div>
                </CommonSmallTitle>
            </div>
            <ModalBox OptionsCall={OptionsCallTwo} />
        </>
    )
}
